<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据表格</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">

		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">

						<div class="layui-inline">
							<label class="layui-form-label">姓名</label>
							<div class="layui-input-inline">
								<input type="text" name="userName" placeholder="姓名" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-inline">
							<label class="layui-form-label">类型</label>
							<div class="layui-input-inline">
								<select name="type" lay-verify="required" lay-search>
									<option value="1">家教</option>
									<option value="2">学生</option>
									<option value="3">管理员</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<div class="layui-input-inline">
								<button class="layui-btn" lay-submit="" lay-filter="user-query">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>

	<script type="text/html" id="user-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>
			新增
		</button>
	</script>

	<script type="text/html" id="user-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
	</script>


<div id="cou-edit" style="display: none" class="layui-form" lay-filter="cou-edit">
	<div class="layui-card-body">

		<form class="layui-form" action="" onsubmit="return false">
			<input name="id" hidden>

			<div class="layui-form-item">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-block">
					<input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-block">
					<input type="text" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="text" name="password" required  lay-verify="required" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">年龄</label>
				<div class="layui-input-block">
					<input type="text" name="age" required  lay-verify="required" placeholder="请输入用户年龄" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="1" title="男">
					<input type="radio" name="sex" value="2" title="女">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
					<input type="radio" name="type" value="1" title="家教">
					<input type="radio" name="type" value="2" title="学生">
					<input type="radio" name="type" value="3" title="管理员" checked>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-block">
					<textarea name="schoolAddress" placeholder="请输入用户地址" class="layui-textarea"></textarea>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</div>

	<script type="text/html" id="sex-type">
		{{#if (d.sex == 1) { }}
		<span>男</span>
		{{# }else if(d.type == 2){ }}
		<span>女</span>
		{{# } }}
	</script>

	<script type="text/html" id="user-type">
		{{#if (d.type == 1) { }}
		<span>家教</span>
		{{# }else if(d.type == 2){ }}
		<span>学生</span>
		{{# }else if(d.type == 3){ }}
		<span>管理员</span>
		{{# } }}
	</script>

	<script type="text/html" id="user-createTime">
		{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
	</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../api/baseApi.js"></script>
		<script src="../../api/userApi.js"></script>
		<script src="../../component/js/core.util.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let drawer = layui.drawer;
				let dropdown = layui.dropdown;


				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: '编号',
							field: 'id',
							align: 'center',
							width: 100
						},
						{
							title: '姓名',
							field: 'username',
							align: 'center'
						},
						{
							title: '年龄',
							field: 'age',
							align: 'center'
						},
						{
							title: '密码',
							field: 'password',
							align: 'center',
							width: 80
						},
						{
							title: '地址',
							field: 'schoolAddress',
							align: 'center'
						},
						{
							title: '类型',
							field: 'type',
							align: 'center',
							templet: '#user-type'
						},
						{
							title: '性别',
							field: 'sex',
							align: 'center',
							templet: '#sex-type'
						},
						{
							title: '注册时间',
							field: 'createTime',
							align: 'center',
							templet: '#user-createTime'
						},
						{
							title: '创建时间',
							field: 'createTime',
							align: 'center',
							templet: '#user-createTime'
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'left',
							width: 160,
							fixed: 'right'
						}
					]
				]

				table.render({
					request: {
						pageName: 'pageNum' , //页码的参数名称，默认：page
						limitName: 'pageSize' //每页数据量的参数名，默认：limit
					},
					elem: '#user-table',
					url:  getListUrl,
					contentType: 'application/json',
					method: 'POST',
					page: true,
					cols: cols,
					skin: 'line',
					limits: [10, 20, 30, 40],
					limit: 10,
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports'],
					parseData: function(res) { //res 即为原始返回的数据
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.data.total, //解析数据长度
							"data": res.data.records //解析数据列表
						};
					},
				});

				table.on('tool(user-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj.data);
					} else if (obj.event === 'edit') {
						window.edit(obj.data);
					} 
				});

				table.on('toolbar(user-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(user-query)', function(data) {
					table.reload('user-table', {
						where: data.field
					})
					return false;
				});

				form.on('switch(user-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});

				window.add = function() {

					var index =  layer.open({
						type: 1,
						title: '',
						area: ['100%', '90%'],
						shade: 0,
						shadeClose: false,
						maxmin:true,
						content: $('#cou-edit'),
						success: function () {
						},
						end: function () {
						}
					});

					form.on("submit(save)", function (data) {
						coreUtil.sendAjax(addUrl, JSON.stringify(data.field), function (res) {
							layer.msg("添加成功", {icon: 1,time: 1000}, function () {
								// 关闭弹出层
								layer.close(index);
								// 刷新当前页
								window.location.reload()
							});
						}, "POST", false)
						return false;
					});

				};


				window.edit = function(data) {
					console.info(data);
					var index =  layer.open({
						type: 1,
						title: '',
						area: ['80%', '80%'],
						shade: 0,
						shadeClose: false,
						maxmin:true,
						content: $('#cou-edit'),
						success: function () {
							form.val('cou-edit', {
								'id': data.id,
								'username':data.username,
								'type':data.type,
								'schoolAddress':data.schoolAddress,
								'password':data.password,
								'age':data.age,
								'sex':data.sex,
								'phone':data.phone
							})
						},
						end: function () {
							console.info("from reset")
							form.val('cou-edit', {
								'id': undefined,
								'userName': undefined,
								'userType': 1,
								'address': undefined
							})
						}
					})

					form.on("submit(save)", function (data) {
						coreUtil.sendAjax(updateUrl, JSON.stringify(data.field), function (res) {
							layer.msg("更新", {icon: 1,time: 1000}, function () {
								// 关闭弹出层
								layer.close(index);
								// 刷新当前页
								window.location.reload()
							});
						}, "PUT", false)
						return false;
					});

				}

				window.remove = function(obj) {
					layer.confirm('确定要删除该用户', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: deleteUrl + obj.id,
							dataType: 'json',
							type: 'delete',
							success: function(result) {
								layer.close(loading);
								if (result.success) {
									layer.msg("删除成功", {
										icon: 1,
										time: 1000
									}, function() {
										obj.del();
									});
									refresh();
								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 1000
									});
								}
							}
						})
					});
				};

				window.refresh = function(param) {
					table.reload('user-table');
				}
			})
            
		</script>
	</body>
</html>
